<!-- 配置车辆弹窗 -->
<template>
  <div>
    <el-dialog
      title="配置车辆"
      :visible="isShowCarDialog"
      width="40%"
      @close="handleClose"
    >
      <div>
        <el-card :shadow="'never'">
          <el-row
            class="top-row"
            :gutter="20"
          >
            <el-col :span="12">
              <span>司机编号：</span>
              <span>{{ driverInfo.userId }}</span>
            </el-col>
            <el-col :span="12">
              <span>司机名称：</span>
              <span>{{ driverInfo.name }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <span>司机电话：</span>
              <span>{{ driverInfo.mobile }}</span>
            </el-col>
            <el-col :span="12">
              <span>所属机构：</span>
              <span>{{ driverInfo.agency.name }}</span>
            </el-col>
          </el-row>
        </el-card>
        <el-form>
          <el-form-item label="配置车辆">
            <el-select
              v-model="value"
              style="width: 280px;"
              @change="carChange"
            >
              <el-option
                v-for="item in carCodeList"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="carInfo"
        >
          <el-table-column
            prop="licensePlate"
            label="车牌号"
          ></el-table-column>
          <el-table-column
            label="车辆状态"
          >
            <template v-slot="{row}">
              <span v-if="!row.workStatus"> <i
                class="el-icon-circle-check"
                style="color: green;"
              ></i>可用</span>
              <span v-else> <i class="el-icon-circle-close"></i> 停用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button
                type="text"
                @click="turnToCarDetail(row.id)"
              >查看</el-button>
              <el-button
                type="text"
                @click="btnDel(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-card>

        </el-card>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="goon2"
          @click="handlerCancel"
        >取 消</el-button>
        <el-button
          type="goon"
          @click="handlerOk"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCarCodeEnabled, getDriverBaseInfo, getCarDetailInof, driverArrangeCar } from '@/api/transit'
export default {
  name: 'CarConfig',
  props: {
    isShowCarDialog: {
      type: Boolean,
      default: false
    },
    driverInfo: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {
      dialogVisible: true,
      carCodeList: [],
      value: '',
      carInfo: [],
      driverIdss: [], // 司机的id列表
      truckidd: null,
      loading: false
    }
  },
  created() {
    // console.log(this.isShowCarDialog)
    // console.log(this.driverId)
    // 获取当前司机的信息
    // 获取所有已经停用的车辆信息
    this.driverIdss = [this.driverInfo.id]
    this.value = this.driverInfo.truck.licensePlate
    this.getCarInfo()
    this.getCarDetailInof(this.driverInfo.truck.id)
    // this.getDriverBaseInfo()
  },
  methods: {
    handleClose() {
      this.$emit('update:isShowCarDialog', false)
    },
    // 点击取消
    handlerCancel() {
      this.$emit('update:isShowCarDialog', false)
    },
    // 点击确定
    async handlerOk() {
      // /manager/truck/truckDrivers
      // 发请求，
      const data = {
        driverIds: this.driverIdss,
        truckId: this.truckidd
      }
      const res = await driverArrangeCar(data)
      if (res.code !== 0) {
        this.$message.error(res.msg)
      }
      this.$emit('update:isShowCarDialog', false)
    },
    // 获取当前司机信息
    async getDriverBaseInfo() {
      const res = await getDriverBaseInfo(this.driverId)
      this.driverInfo = res.data
    },
    // 获取未启用车辆信息
    async getCarInfo() {
      const res = await getCarCodeEnabled()
      this.carCodeList = res.data
      // licensePlate
    },
    // 所选车辆变化
    async carChange() {
      this.getCarDetailInof(this.value)
    },
    async getCarDetailInof(id) {
      this.loading = true
      // console.log('汽车id', id)
      this.truckidd = id
      const res = await getCarDetailInof(id)
      this.carInfo = [res.data]
      this.loading = false
    },
    turnToCarDetail(id) {
      // console.log(id)
      // 跳转到其他人开发的部分
      this.$router.push(`vehicle-detail/?id=${id}&formUrlName=车辆管理`)
    },
    btnDel(data) {
      // 清空当前的select值
      this.value = null
      this.carInfo = null
    }

  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 15px;
  background-color: #fbfafa;
  .top-row {
    margin-bottom: 15px;
}
}
.el-button--goon:focus,
.el-button--goon:hover {
  background: #ffab98;
  border-color: #ffab98;
  color: #fff;
}

.el-button--goon {
  color: #FFF;
  background-color: #e15536;
  border-color: #e15536;
}
// ---第二个按钮
.el-button--goon2:focus,
.el-button--goon2:hover {
  background: #ffeeeb;
  border-color: #e15536;
  color: #e15536;
}

.el-button--goon2 {
  background-color: #fff;
  border-color: #ccc;
}
</style>
